<template>
  <div class="login">
    <div class="form">
      <img class="logo" src="../img/logo.png" alt="">
      <div class="welcom">
        人脸识别demo
      </div>
      <div class="login-form">
        <div class="login-text">
          <img src="../img/account.png" alt="">
          <input v-model="login_info.account" type='text' placeholder="请输入用户名" />
        </div>
        <div style='margin-bottom:0;' class="login-text">
          <img src="../img/password.png" alt="">
          <input v-model="login_info.password" type='password' placeholder="请输入密码" />
        </div>
        <!-- <div class="core">
                                      <div class="core-text">
                                        <input v-model="login_info.yzm" type='text' placeholder="请输入验证码" />
                                      </div>
                                      <img style="width:30%; height:9vw;" @click="getcore()" :src="coresrc"></img>
                                       <span v-on:click="$router.push('forget_password')">忘记密码?</span> 
                                    </div> -->
        <div class="login-buttonground">
          <!--mt-button class='login-button' v-on:click="login">登录</mt-button-->
          <mt-button class='login-button' v-on:click="login()">登 入</mt-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import http from 'service/myhttp'

  export default {
    name: 'login',
    components: {},
    data() {
      return {
        msg: '登录',
        coresrc: '',
        login_info: {
          account: null,
          password: null,
          yzm: null
        }
      }
    },
    methods: {
      getcore: function() {
        // //更改地址获取验证码
        // this.coresrc = '/wifi/login_Login_getIdCode?time=' + Math.random()
      },
      login: function() {
        // 登录
        // http.post('login_Login_login', this.login_info).then(
        //   res => {
        //     // console.log(res)
        //     if (res.data.resultCode == '000000') {
        //       //成功
        //       // console.log(this)
        //       this.$router.push('/main/exhibition')
        //     } else {
        //       //登录失败
        //       alert(res.data.resultMsg)
        //     }
        //   }
        // )
        this.$router.push('/face')
      }
    },
    mounted() {

    },
    beforeRouteEnter: function(to, from, next) {
      //路由钩子
      // console.log('enter')
      next(vm => {
        //获取验证码
        vm.getcore()
      })
    },
    beforeRouteLeave: function(to, from, next) {
      // console.log('leave')
      next()
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  input::-webkit-input-placeholder {
    color: #fff;
  }
  .login-text {
    border-radius: 0;
    margin: 0 0 0.64rem 0;
    height: 1.6rem;
    text-align: right;
    padding: 1px 0%;
    background-color: rgba(255, 255, 255, 0.25);
    color: #fff;
  }
  .login-text img {
    width: 0.96rem;
    vertical-align: middle;
    margin-right: 0.5rem;
    /* height: 0.96rem; */
  }
  .core-text {
    /* border: 1px solid #999; */
    border-radius: 0vw;
    margin: 0vw 0 6vw 0;
    text-align: center;
    padding: 1px 0%;
    width: 65%;
    float: left;
    background-color: transparent;
    color: #fff;
  }
  .core-text input {
    outline: 0;
    border: 0;
    padding: 2vw 3vw;
    width: 85%;
    font-size: 4vw;
  }
  .login-text input,
  .verification_code .text input {
    outline: 0;
    border: 0;
    padding: 0rem 0rem;
    width: 82%;
    height: 100%;
    font-size: 4vw;
    background-color: transparent;
    color: #fff;
  }
  .verification_code {
    display: table;
    width: 100%;
    margin: 0vw 0 6vw 0;
  }
  .verification_code .text input {
    width: 80%;
  }
  .verification_code .text {
    float: left;
    width: 56%;
    padding: 1px;
    border: 1px solid #999;
    border-radius: 2vw;
    text-align: center;
  }
  .verification_code button {
    float: right;
    border: 1px solid #999;
    padding: 3vw 4vw;
    font-size: 4vw;
    border-radius: 2vw;
    color: #999;
    background-color: #fff;
    outline: 0;
  }
  .login {
    /* background: -webkit-linear-gradient(140deg, #6C8CD9 40%, #50B9E9);
                        background: -moz-linear-gradient(140deg, #6C8CD9 40%, #50B9E9);
                        background: -o-linear-gradient(140deg, #6C8CD9 40%, #50B9E9);
                        background: linear-gradient(140deg, #6C8CD9 40%, #50B9E9); */
    background-image: url('../img/bg.png');
    background-size: cover;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .login-form {
    width: 12rem;
    margin: auto;
  }
  .logo {
    width: 3.68rem;
    height: 3.24rem;
  }
  .core {
    text-align: right;
    font-size: 3vw;
    margin-top: 6vw;
    color: #999;
  }
  .login-buttonground {
    margin-top: 1.72rem;
  }
  .login-button {
    width: 100%;
    font-size: 0.68rem;
    height: 1.6rem;
    background: -webkit-linear-gradient(left, RGB(177, 223, 249) 30%, RGB(192, 205, 249));
    /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(left, RGB(177, 223, 249) 30%, RGB(192, 205, 249));
    /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(left, RGB(177, 223, 249) 30%, RGB(192, 205, 249));
    /* Firefox 3.6 - 15 */
    background: linear-gradient(left, RGB(177, 223, 249) 30%, RGB(192, 205, 249));
    /* 标准的语法 */
    color: #fff;
    box-shadow: 0.24rem 0.08rem 0.48rem #a4c0eb;
  }
  .login .form {
    width: 100%;
    margin-bottom: 4rem;
  }
  .welcom {
    margin: 0.44rem 0rem 2.16rem 0rem;
    text-align: center;
    color: #fff;
    font-size: 0.96rem;
  }
</style>
